<template>
		<view class="goods-item">
			<view class="goods-top">
				<image  :src="goods.goods_small_logo || defaultPic" mode=""></image>
			</view>
			<view class="goods-bottom">
				<text class="goods-name">{{goods.goods_name}}</text>
				<text class="goods-price">${{goods.goods_price | toPrice}}元</text>
			</view>
		</view>
</template>

<script>
	export default {
		name:"goods-item",
		data() {
			return {
				defaultPic: 'https://www.qqjpg.com/uploads/allimg/201123/1-201123105J62K.jpg'
			};
		},
		props:{
			goods:{
				Default:{},
				Type:'object'
			}
		},
		filters:{
			toPrice(price){
				return Number(price).toFixed(2)
			}
		},
	}
</script>

<style lang="scss">
.goods-item {
	border-radius: 20px;
	background-color: #fff;
	// box-sizing: border-box;
	width: 100%;
	height: 200px;
	margin-top: 5px;
  .goods-top {
	  box-sizing: border-box;
	  padding: 5px;
	  height: 150px;
	  width: 100%;
	  image {
		  object-fit: cover;
		  border-radius: 20px;
		  width: 100%;
		  height: 100%;
		  
	  }
  }
  .goods-bottom {
	  width: 100%;
	  height: 50px;
  }
  .goods-bottom {
	  margin-top: 5px;
	  .goods-name {
		  display: inline-block;
		  width: 100%;
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  font-size: 15px;
		  color: #8f8f8f;
	  }
	  .goods-price {
		  color: red;
		  margin-left: 10px;
	  }
  }
}
</style>